import { Link, Switch, Route, Redirect } from "react-router-dom"
import Course from "./Course"
import Product from "./Product"
import Login from "./Login"
import Service from './Service'
import { useState } from "react"
import Page404 from "./Page404"
import About from "./About"
const Layout = () => {
  const [isLogin, setIsLogin] = useState(false)
  const changeLoginState = () => {
    setIsLogin(true)
  }
  return (
    <div>
      <nav>
        <ul>
          <li>
            {/* <Link to={{ pathname: "/course", search: "?sort=name", hash: "#the-hash", }}>课程</Link> */}
            {/* <Link to="/course?sort='语文'">课程</Link> */}
            <Link to={{ pathname: "/course", search: "?sort=name", state: { a: 1, b: 'asdfa' } }}>课程</Link>
          </li>
          <li>
            {/* <Link to={{ pathname: "/product" }}>产品</Link> */}
            {/* <Link to={{ pathname: "/product/10001" }}>产品</Link> */}
            <Link to={{ pathname: "/product/10001/detail/124", state: { a: 1, b: 'asdfa' } }}>产品</Link>


          </li>
          <li>
            <Link to={{ pathname: "/service" }}>服务</Link>
          </li>
          <li>
            {/* <Link to={{ pathname: "/login" }}>登录</Link> */}
            <Link to={{ pathname: "/login/123", search: "?sort=name", state: { a: 1, b: 'asdfa' } }}>登录</Link>
          </li>
          <li>
            <Link to={{ pathname: "/about" }}>关于公司</Link>
          </li>
        </ul>
      </nav>
      <hr />
      <Switch>
        {/* 根路由，访问Login组件 */}
        {/* <Route exact path="/" component={Login}></Route> */}
        {/* 根路由，重定向到 /login 路由 */}
        <Route exact path="/" render={() => <Redirect to="/login" />}></Route>

        <Route path="/course" component={Course}></Route>
        {/* <Route path="/product" component={Product}></Route> */}
        {/* 改为动态路由 */}
        {/* <Route path="/product/:pid" component={Product}></Route> */}
        <Route path="/product/:pid/detail/:id" component={Product}></Route>



        {/* <Route path="/service" render={() => <Service />}></Route> */}
        <Route path="/service" render={() => {
          // render里面可以做逻辑处理，再返回一个组件。
          return isLogin ? <Service /> : <Login isLogin={isLogin} changeLoginState={changeLoginState} />
        }}></Route>

        {/* <Route path="/login" render={() => <Login isLogin={isLogin} changeLoginState={changeLoginState} />}></Route> */}
        <Route path="/login/:uid" render={() => <Login isLogin={isLogin} changeLoginState={changeLoginState} />}></Route>

        <Route path="/about" component={About} />
        <Route path="*" component={Page404}></Route>
      </Switch>
    </div >
  )
}

export default Layout